<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="style/fjol_style.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="style/xol_style.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		#segmentedControls .mui-control-item {
				line-height: 40px;
				width: 100%;
			}
	</style>
	<body>
		<span class="dn" id="bgZhezhao" style="position: fixed; top: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); z-index: 1;"></span>
		<header class="mui-bar mui-bar-nav p0 newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <!--<div id="openSearchPage" align="center">
		        	<span class="mui-icon mui-icon-search" style="vertical-align: middle"></span>
		        	<span>请输入小区名或地址</span>
		        </div>-->
		    <div id="openSearchPage" align="center" class="mui-clearfix p10">
		        	<span class="mui-icon mui-icon-search colorWhite mui-pull-right" style="vertical-align: middle;"></span>
		        	<span class="mui-icon colorWhite" style="font-size: 1.4rem;">新房</span>
		        </div>
		
			<div class="fj-house-tab rel pb5" style="background: #EEEEEE;">
			<div class="mui-segmented-control" id="searchPageMenu">
		          <a class="mui-control-item tab-a"><span>区域</span><b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item tab-a"><span>均价</span><b class="down-triangle ml2"></b></a>
		      </div>
		      <div class="fj-house-tab-div abs" style="z-index: 9;">
		      	<div class="mui-row mui-hidden house-tab-ul bg-white" id="item1">
	      	        <div class="bg-white" style=" max-height: 300px; overflow-y: auto;">
						<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a class="mui-control-item mui-text-left" id="allArea" href="">
			  	                 不限
			  	            </a>
						</div>
					</div>
	      	        
	      	    </div>
		      	    <ul class="mui-table-view mui-hidden house-tab-ul">
		      	            <li class="mui-table-view-cell" data-value = "0">
		      	                    不限
		      	            </li>
		      	            <li class="mui-table-view-cell" data-value = "0-10000">
		      	                     10000元以下
		      	            </li>
		      	            <li class="mui-table-view-cell" data-value = "10000-12000">
		      	                     10000-12000元
		      	            </li>
		      	                <li class="mui-table-view-cell" data-value = "12000-15000">
		      	                        12000-15000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "15000-18000">
		      	                        15000-18000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "18000-20000">
		      	                        18000-20000元
		      	                </li>
		      	                <li class="mui-table-view-cell" data-value = "20000-50000000">
		      	                        20000元以上
		      	                </li>
		      	           </ul>
		      	           
		      </div>
		   </div>
		   
		</header>
		<div class="mui-content rel" style="top: 45px;">
		    <div class="mui-scroll-wrapper">
		        <div class="mui-scroll" id="refreshContainer">
		            <!--这里放置真实显示的DOM内容-->
		            <ul class="mui-table-view bg-white" id="houselist">
		               
		            </ul>
		        </div>
		    </div>
		    
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script src="js/fj_area_util.js"></script>
		<script src="js/fj_base_data.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/xzx.open.js"></script>
		<!-- 选择区域 -->
		<script id="areaTmpl" type="text/x-jquery-tmpl">
  	             <a class="mui-control-item mui-text-left" id="${identId}" data-grade="${grade}" href="${parentId}">
  	                 ${areaName}
  	            </a>
		</script>
		<!-- 列表cont -->
		<script id="houseListTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell" id="${id}">
		        <a href="javascript:;" class="mui-navigate-right" style="padding-right:20px;">
		            <!--<img class="mui-pull-left mr5" width="100" height="80" src="${coverImage}">-->
		            <div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">
		        		{{if coverImage}}
		        		<img src="${coverImage}">
		        		{{else}}
		        		<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">
		        		{{/if}}
		        	</div>
		            <div class="mui-media-body">
		                <span style="font-weight: bold;">${name}</span>
		                <p class="mui-ellipsis">${address}</p>
		                <div class="mui-clearfix">
		                	<span class="mui-badge mui-badge-success mui-badge-inverted f14 mui-pull-right"></span>
		                	<p class="mui-ellipsis mt5"><span class="newRed">${averagePrice}万/平</span>  建筑面积 ${buildingSquare?buildingSquare:0}平方</p>
		                	
		                </div>
		            </div>
		        </a>
		    </li>
		</script>
		
		
		<script type="text/javascript">
		mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					down:{
						callback: pulldownRefresh
					},
					up:{
						callback:pullupRefresh
					}
				}

		});	
			
			var pagevalue =1;
			
			var searchKey = '',
				 areaIdentId=0,
				streetIdentId=0,
				 housePrice = 0,
				bedRoomNumber=0;
			
			function pulldownRefresh(){
				
				$('.mui-pull').hide();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
					getHouseList(1,true,searchKey,areaIdentId,streetIdentId,housePrice);
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
					return pagevalue=1;
				},1000);
			}
			function pullupRefresh(){
				
				$('.mui-pull').show();
				setTimeout(function(){
//					console.log(areaIdentId+','+streetIdentId+','+housePrice+','+bedRoomNumber);
					pagevalue++;
					getHouseList(pagevalue,false,searchKey,areaIdentId,streetIdentId,housePrice);
				},1000);
			}
			
			mui.plusReady(function(){
				
				getHouseList(1,false,searchKey,areaIdentId,streetIdentId,housePrice);
				mui('#houselist').on('tap','li',function(){
					openFileWindowWithPage('new_house','newHouse_detail',{
						buildingId:this.getAttribute('id'),
						parentid:'new_house'
					})
				});
				
				/*
				 * 选择区域
				 * */
				document.querySelector('.house-tab-ul').addEventListener('touchmove',function(event){
					event.stopPropagation();		//阻止冒泡
				});
				var currentCity = areaUtils.getCurrentCityChileAreaList();
				
				$('#areaTmpl').tmpl(currentCity).appendTo('#segmentedControls');
				
				mui('#segmentedControls').on('tap','a',function(){	//选择区域
					pagevalue = 1;
					
					var parentId = this.getAttribute('href');	//parentId
					var thisId = this.getAttribute('id');		//identId
					var thisGrade = this.getAttribute('data-grade');	//grade
					
					$('.mui-pull').hide();
					if(thisId=='allArea'){		//不限区域
						areaIdentId = 0;
						streetIdentId=0;
						$('.mui-segmented-control .tab-a').eq(0).find('span').text('区域');
					}else{
						areaIdentId = thisId;
						streetIdentId =0;
						if(thisGrade==4){
							areaIdentId = parentId;
							streetIdentId = thisId;
						}
						$('.mui-segmented-control .tab-a').eq(0).find('span').text(this.text);
					}
					getHouseList(pagevalue,true,searchKey,areaIdentId,streetIdentId,housePrice);
					
					$(this).parents('.house-tab-ul').addClass('mui-hidden');
					$('#bgZhezhao').hide();
					
				});		
				
				/*
				 * 选择售价范围
				 */
				mui('ul.house-tab-ul').on('tap','li',function(){
					pagevalue = 1;
					var parentsIdx = $(this).parents('.house-tab-ul').index();//父级ul的序号，进而得到tab-a的序号
					
					switch(parentsIdx){
						case 1:	//选择售价的情况
						housePrice = this.getAttribute('data-value');
						if($(this).index()==0){
							$('.mui-segmented-control .tab-a').eq(parentsIdx).find('span').text('均价');
						}else{
							$('.mui-segmented-control .tab-a').eq(parentsIdx).find('span').text(this.innerHTML);
						}
//						console.log(housePrice);
						getHouseList(pagevalue,true,searchKey,areaIdentId,streetIdentId,housePrice,bedRoomNumber);
						$(this).parents('.house-tab-ul').addClass('mui-hidden');
						$('#bgZhezhao').hide();
						break;
					}
				});
				
				document.addEventListener('getSearchkey',function(event){
					pagevalue = 1;
					searchKey = event.detail.searchWord;
					$('#openSearchPage').find('span').eq(1).text(searchKey);
					getHouseList(pagevalue,true,searchKey,areaIdentId,streetIdentId,housePrice,bedRoomNumber);
				});
			
			});
			
			function getHouseList(pagevalue,isTrue,searchKey,areaIdentId,streetIdentId,averagePrice){
//				console.log(searchKey);

				var param = [{
					key:'searchKey',
					value:searchKey
				},{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:10
				},{
					key:'areaIdentId',
					value:areaIdentId
				},{
					key:'streetIdentId',
					value:streetIdentId
				},{
					key:'averagePrice',
					value:averagePrice
				}];

				fjNetwork.get('fjzx/common/search-new-building.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					if(isTrue){
						document.querySelector('#houselist').innerHTML = '';
						mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
						$('.mui-pull').hide();
					}
					if(rows.length ==0){
						if(pagevalue == 1){
							document.querySelector('#houselist').innerHTML = '<div class="mui-text-center"><img src="images/icon_blank.png"/></div>'
						}
					}else{
					$('#houseListTmpl').tmpl(rows,{
						getkeywordArr:function(){
							var keywords = new Array();
							if(this.data.keyword){
								keywords = this.data.keyword.split(',');
							}else{
								keywords = '';
							}
							return keywords;
						}
					}).appendTo('#houselist');
					
					var imgObj = $('#houselist img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
//							console.log($(this).width()+','+$(this).height());
							var rate = parseFloat($(this).height()/$(this).width());
//							console.log(rate);
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
					
					}
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(rows.length==0);
				},function(msg){
					mui.toast(msg);
				});
			}
	
	document.querySelector('#openSearchPage').addEventListener('tap',function(){
		mui.openWindow({
			url:'fj_search.html',
			extras:{
				parentName:'newHouse_searchList'
			}
		})
	});
	
	
	mui('.mui-segmented-control').on('tap','.tab-a',function(){
		var idx = $(this).index();
		var _ul = $('.fj-house-tab-div').find('.house-tab-ul');
		_ul.eq(idx).toggleClass('mui-hidden').siblings().addClass('mui-hidden');
		if(_ul.eq(idx).hasClass('mui-hidden')){
			$('#bgZhezhao').hide();
		}else{
			$('#bgZhezhao').show();
		}
	});
	$('#bgZhezhao').on('click',function(){
		$('.fj-house-tab-div').find('.house-tab-ul').addClass('mui-hidden');
		$(this).hide();
	});
	
		</script>
	</body>
</html>
